<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />	
		<script src="//cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
		<script type="text/javascript" src="js/bmob-min.js" ></script>
		<title></title>
		<style>
		    table {background:black;width: 100%;}
			table td{background:#FFF;text-align: center;}
		    *{font-size: .9rem;}
		    .tr_name{min-width: 40px;}
		</style>
	</head>
	<body>
		<p>共有：<span id="length"></span> 条数据</p>
		<p>确定来宾人数：<span id="isComeNum"></span></p>
		<table id="result"  border="0" cellspacing="1" cellpadding="5">
			<tr>				
				<td>姓名</td>
				<td>来宾人数</td>
				<td>消息</td>
				<td>创建时间</td>				
			</tr>
		</table>
		<script>
			Bmob.initialize("141d3c4c418aa624978d74a82375788b", "1764d1a85f20e649cb4bde39fdd70ebb");
			//创建类和对象实例
			var people = Bmob.Object.extend("people");
			selectAll();
			//查看数据方法
			function selectAll(){
				var query=new Bmob.Query(people);
				query.limit(1000);
				var datas={
					length:'',
					items:[],
					isComeNum:0
				};
				query.find({
					success:function(result){
						datas.length=result.length;
						for(var i=0;i<result.length;i++){				
							datas.items.push(result[i])
							datas.isComeNum+=Number(result[i].get('count'));
						}
						pushDataToDom(datas);			
					},
					error:function(per,errData){
						alert("查询失败: " + errData.code + " " + errData.message)
					}
				})
			}
			//渲染数据到dom
			function pushDataToDom(data){
				$("#length").text(data.length);
				$("#isComeNum").text(data.isComeNum);
				oldLength=data.length;
				var table=$("#result");
				for(var i=0;i<data.items.length;i++){
					var id=data.items[i].id,
					    name=data.items[i].attributes.name,
					    count=data.items[i].attributes.count,
					    msg=data.items[i].attributes.msg,
					    time=data.items[i].createdAt;
					var str="<tr> <td class='tr_name'>"+name+"</td><td>"
						               +count+"</td><td>"
						               +msg+"</td><td>"
						               +time+"</td> </tr>";
					table.append(str);
				}
				
				
				
			}
		</script>
	</body>
</html>
